<template>
    <div class="detail-header" :style="{backgroundImage: 'url('+detailData.bannerImg+')'}">
        <p class="title">{{ detailData.sightName }}</p>
        <p class="title" v-if="detailData.gallaryImgs" @click="handleChange">
            <i class="iconfont icon-tupian"></i>
            {{ detailData.gallaryImgs.length }}
        </p>

        <detail-gallary v-if="gallaryShow" :gallarys="detailData.gallaryImgs" @hideGallary="handleHide"></detail-gallary>
    </div>
</template>

<script>
    import DetailGallary from "./DetailGallary"
    export default {
        props: ['detailData'],
        name: "DetailHeader",
        data() {
          return {
              gallaryShow: false
          }
        },
        methods: {
            handleChange() {
                this.gallaryShow = true
            },
            handleHide() {
                this.gallaryShow = false
            }
        },
        components: {
            DetailGallary
        }
    }
</script>

<style scoped>

    .detail-header {
        width: 100%;
        height: 160px;
        background-size: cover;
        box-sizing: border-box;
        position: relative;
        color: white;
    }
    .title {
        position: absolute;
        bottom: 40px;
        left: 10px;
        background: rgba(0,0,0,0.7);
        padding: 5px 8px;
        border-radius: 10px;
        font-size: 13px;
    }

    .title:last-of-type {
        bottom: 10px;
    }



</style>